<template>

  <div>
      <el-row>
        <el-col :span="2" :offset="1"><el-button type="primary" plain @click="add">新增出库订单</el-button></el-col>
      </el-row>

      <hr/>

      <outshopList :outshopdata="outshopdata"></outshopList>

    <!-- 分页-->
      <div class="block" @click="showAll()">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[3]"
            :page-size="3"
            layout="prev, pager, next, jumper"
            :total="maxpage">
        </el-pagination>
      </div>
      <!-- 弹窗-->
      <el-dialog title="用户信息" :visible.sync="dialogFormVisible" :append-to-body="true">
          <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
        <el-form :model="form">
            <el-form-item label="出库人姓名" :label-width="formLabelWidth">
              <el-input v-model="outshop.outusname" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth">
              <el-input v-model="outshop.outidcard" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
              <el-input v-model="outshop.usphone" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="出库商品" :label-width="formLabelWidth">
              <el-select v-model="outshop.shopid" clearable placeholder="请选择" style="width: 100%;">
                   <el-option
                        v-for="item in selectshop"
                        :key="item.shopid"
                        :label="item.shopname"
                        :value="item.shopid">
                      </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出库数量" :label-width="formLabelWidth">
              <el-input v-model="outshop.outnum" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <!-- 设置触发更新的方法 -->
              <el-button type="primary" @click="update">确 定</el-button>
            </div>
      </el-dialog>


  </div>

</template>

<script>
  var _this;
  import outshopList from '../components/outshop/outshopList.vue'
  export default {
      created() {
        _this=this;//记录this--【当前组件对象】
        _this.showAll();
        _this.countpage();
        _this.outshop.usid=localStorage.getItem("usid");
      },
      components:{
        outshopList
      },
      methods: {
        showAll(){
          //进后台查-->axios
          _this.$axios.post(
            "/outshop/all?page="+this.currentPage,
            {}
          )
          .then(function(param){
            console.log(param)
            _this.outshopdata=param.data
          })
          .catch(function(err){
            console.log(err)
          }),
          //下拉框查询数据
          _this.$axios.post(
             "/shop/all",
             {}
          )
          .then(function(param){
          	console.log(param)
          	_this.selectshop=param.data
          })
          .catch(function(err){
          	console.log(err)
          })
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        countpage(){
          _this.$axios.post(
            "/outshop/count",
            {}
          )
          .then(function(param){
            console.log(param)
            _this.maxpage=param.data
          })
          .catch(function(err){
            console.log(err)
          })
        },
        add() {
            //   设置点击按钮之后进行显示对话框
            this.dialogFormVisible = true;
        },
        update() {
          //   this.form.date = reformat(this.form.date);
          //    可以在html上面进行设置日期的格式化
          //   将我们添加的信息提交到总数据里面
          _this.$axios.post(
          	"/outshop/insert",
          	{
              "outusname":this.outshop.outusname,
              "outidcard":this.outshop.outidcard,
              "usphone":this.outshop.usphone,
              "shopname":this.outshop.shopname,
              "outnum":this.outshop.outnum,
              "uid":this.outshop.usid,
              "shopid":this.outshop.shopid
            }
          )
          .then(function(param) {
          	if(param.data=="error1"){
				alert("数量不足");
			}else if(param.data=="error"){
				alert("添加失败");
			}else{
				alert("出库成功");
			}
          })
          .catch(function(err) {
          	console.log(err)
          })
          this.outshop.outidcard="";
          this.outshop.outusname="";
          this.outshop.usphone="";
          this.outshop.shopname="";
          this.outshop.outnum="";
          // 取消的时候直接设置对话框不可见即可
          this.dialogFormVisible = false;
        },
        cancel() {
          // 取消的时候直接设置对话框不可见即可
          this.dialogFormVisible = false;
        }
      },
      data() {
        return {
          outshopdata: [],
          selectshop:[],
          currentPage: 1,
          maxpage: 1,
          dialogFormVisible: false,
          formLabelWidth: "100px",
          // 设置form用于进行添加的时候绑定值
          form: {},
          outshop:{
            outusname: "",
            outidcard: "",
            usphone: "",
            shopname: "",
            outnum: "",
            shopid:"",
            usid:""
          }
        };
      }
    }
</script>

<style>

</style>
